<template>
  <div>
    <!--    学生基本信息管理 <br>-->
    <!--    学生基本信息、联系方式、入学前信息、家庭信息、社会关系等基本信息的管理 <br>-->
    <div style="">
      <div style="margin: 10px">
        <el-button type="primary" @click="do_create">添加</el-button>

      </div>
      <div style="margin: 10px">
        <el-input v-model="queryData.data.id" placeholder="请输入学号查询" style="width: 20%" clearable></el-input>
        <el-button type="primary" style="margin-left: 5px" @click="do_query">查询</el-button>
      </div>

    </div>
    <el-table
        :data="tableData"
        border
        style="width: 100%; height: 400px">
      <el-table-column
          prop="id"
          label="学号"
          width="">
      </el-table-column>
      <el-table-column
          prop="studentName"
          label="姓名"
          width="70"
          >
      </el-table-column>
      <el-table-column
          prop="sex"
          label="性别"
          width="70">
      </el-table-column>
      <el-table-column
          prop="cellPhone"
          label="手机号"
          width="120">
      </el-table-column>
      <el-table-column
          prop="birthday"
          label="生日">
      </el-table-column>
      <el-table-column
          prop="age"
          label="年龄"
      width="50">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址"
          width="150">
      </el-table-column>
      <el-table-column width="280px"
                       label="操作">
        <!--       在列中插入按钮，使用scope.row进行获取当前行操作 -->
        <template slot-scope="scope">
          <el-button size="mini" type="info" round @click="findMore(scope.row.id)">信息</el-button>
          <el-button size="mini" type="success" round @click="do_edit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" round @click="do_delete(scope.row.id)">删除</el-button>
          <el-button size="mini" type="info" round @click="export_pdf(scope.row.id)">简历</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
        style="margin-top: 20px"
    >
    </el-pagination>
    <el-dialog title="查看详细信息" :visible.sync="this.findMoreVisible" width="30%" :before-close="findMoreVisibleClose">
    <div style="padding-left: 40px">
      <el-button size="mini" round type="info" @click="jumpInnovation">
        创新实践
      </el-button>
      <el-button size="mini" round type="info" @click="jumpHonorInfo">
        荣誉信息
      </el-button>
      <el-button size="mini" round type="info" @click="jumpDailyInfo">
        日常活动
      </el-button>
    </div>
      <div style="padding-top: 10px;padding-left: 40px">
        <el-button size="mini" round type="info" @click="jumpLogInfo">
          外出信息
        </el-button>
        <el-button size="mini" round type="info" @click="jumpCardCost">
          消费信息
        </el-button>
        <el-button size="mini" round type="info" @click="jumpCourseInfo">
          选课信息
        </el-button>
      </div>


    </el-dialog>
    <el-dialog
        title="学生信息操作"
        :visible.sync="this.dialogVisible"
        width="30%"
        :before-close="handleClose">
      <el-form label-position="left" label-width="80px" :model="formData">
        <!--        <el-form-item label="id" v-if="false">-->
        <!--          <el-input v-model="formData.id" ></el-input>-->
        <!--        </el-form-item>-->
        <el-form-item label="学号">
          <el-input v-model="formData.id" :disabled="theDisable"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="formData.studentName"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <!--          <el-input v-model="formData.sex"></el-input>-->
          <el-radio v-model="formData.sex" label="男">男</el-radio>
          <el-radio v-model="formData.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="电话号">
          <el-input v-model="formData.cellPhone" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker
              v-model="formData.birthday"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input-number v-model="formData.age" :min="1" :max="100" label="年龄"></el-input-number>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="formData.address"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" size="mini" @click="do_cancel" style="margin-left: 160px">取 消</el-button>
      <el-button type="primary" size="mini" @click="save">保存</el-button>
    </el-dialog>
  </div>
</template>

<script>
import {deleteBasicInfo, getBasicInfo, getStudentIntroducePdf, updateBasicInfo} from "@/api/data";

export default {
  name: "StudentBasicInfo",
  data() {
    return {
      formData: {
        id: null,
        // studentNum: null,
        studentName: null,
        sex: null,
        cellPhone: null,
        birthday: null,
        address: null,
        age: null,

      },
      findId:null,
      theDisable: false,
      findMoreVisible:false,
      dialogVisible: false,
      pageSize: 5,
      currentPage: 1,
      total: 0,
      tableData: {
        id: null,
        // studentNum: null,
        studentName: null,
        sex: null,
        cellPhone: null,
        birthday: null,
        address: null,
        age: null,
      },
      queryData: {
        data: {
          currentPage: 1,  //当前的页码
          id: null  //学生的学号（按照学号进行查找）
        }
      },
      pdfUrl: null
    }
  },
  methods: {
    jumpInnovation(){
      sessionStorage.setItem("id",this.findId)
      this.$router.push({
        name: 'innovativeAndPractices'
      })
    },
    jumpCardCost(){
      sessionStorage.setItem("id",this.findId)
      this.$router.push({
        name: 'CardCost'
      })
    },
    jumpDailyInfo(){
      sessionStorage.setItem("id",this.findId)
      this.$router.push({
        name: 'studentDailyInfo'
      })
    },
    jumpHonorInfo(){
      sessionStorage.setItem("id",this.findId)
      this.$router.push({
        name: 'studentHonorsInfo'
      })
    },
    jumpLogInfo(){
      sessionStorage.setItem("id",this.findId)
      this.$router.push({
        name: 'studentLogInfo'
      })
    },
    jumpCourseInfo(){
      sessionStorage.setItem("id",this.findId)
      this.$router.push({
        name: 'studentSelectInfo'
      })
    },
    handleClose() {
      this.$data.dialogVisible = false;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$data.queryData.currentPage = val
      //获取分页的数据
      this.queryData.data.currentPage = val
      getBasicInfo(this.$data.queryData).then(res => {
        this.tableData = res.data.tableData
        this.total = res.data.total
      })
    },
    do_cancel() {
      this.dialogVisible = false;
      this.do_query();
    },
    do_query() {
      getBasicInfo(this.$data.queryData).then(res => {
        this.tableData = res.data.tableData
        console.log(this.tableData)
        this.total = res.data.total
      })
    },
    do_create() {
      this.$data.formData = {}
      this.$data.theDisable = false
      this.$data.dialogVisible = true
    },
    do_edit(data) {
      console.log(data)
      this.$data.theDisable = true //设置学号不可编辑
      this.$data.dialogVisible = true
      this.$data.formData = data
    },
    save() {
      let updateAndCreateData = {
        data: {
          formData: this.formData
        }
      }
      //对手机号进行校验
      let phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!phoneReg.test(updateAndCreateData.data.formData.cellPhone)) {
        this.$message({
          type: 'info',
          message: '手机号输入格式有误！！'
        })
        return
      }
      console.log(updateAndCreateData);
      updateBasicInfo(updateAndCreateData).then(res => {
        this.$data.dialogVisible = false
        if (res.code === "0") {  //表示进行编辑操作
          this.$message({
            type: 'success',
            message: '更新成功！'
          })
          this.do_query()
        } else if (res.code === "1") {  //表示进行新增操作
          this.$message({
            type: "success",
            message: "添加成功！"
          })
          this.do_query()
        } else {
          this.$message({
            type: 'info',
            message: '操作失败！'
          })
        }

        this.$data.formData = {}  //清空form表单
      })
    }
    ,
    findMore(id){

      this.findMoreVisible = true
      this.findId = id

    },
    findMoreVisibleClose(){
      this.findMoreVisible = false
    },
    do_delete(theId) {
      this.$confirm('此操作将永久删除该学生！是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //用户点击确认按钮
        let deleteData = {
          data: {
            deleteId: theId
          }
        }
        deleteBasicInfo(deleteData).then(res => {
          //重新查询表格数据
          this.do_query()
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
    ,
    export_pdf(theId) {
      let requestData = {
        data: {
          studentId: theId
        }
      }
      getStudentIntroducePdf(requestData).then(res => {
        console.log(res);
        const binaryData = [];
        binaryData.push(res);
        //获取blob链接
        this.pdfUrl = window.URL.createObjectURL(new Blob(binaryData, {type: 'application/pdf'}));
        window.open(this.pdfUrl);
      })
    }
  },
  mounted() {
    sessionStorage.setItem("id","0")
    getBasicInfo(this.$data.queryData).then(res => {
      this.tableData = res.data.tableData
      this.total = res.data.total
    })
  },


}
</script>

<style scoped>
.header_button {
  display: flex;
  padding: 10px;
}
</style>
